import { connect } from 'react-redux';
import { Tabs } from 'antd';
import Db from '../db/index';
import { change, remove } from '../../redux/actions/main';

function Main(props) {
    const onEdit = (k, a) => {
        if (a === 'remove') props.remove(k);
    };
    const onChange = k => props.change(k);
    return <Tabs hideAdd type="editable-card" onEdit={onEdit} activeKey={props.tab.active} onChange={onChange}>
        {
            props.tab.items.map(x => {
                let c = props.connects.find(y => y.id === x.connectId),
                    key = `${x.connectId}_${x.db.id}`,
                    title = `${x.db.name} @${c.link_name}`;

                return <Tabs.TabPane tab={title} key={key}>
                    <Db />
                </Tabs.TabPane>
            })
        }
    </Tabs>
}

export default connect(
    s => ({ tab: s.main, connects: s.mainLeftTree.nodes }),
    { change, remove }
)(Main);